
<template>
    <div id="cesium-viewer">
        <slot/>
    </div>
</template>

<script setup>
import * as Cesium from "cesium";
import { onMounted,markRaw } from "vue";
import {useMapData} from '@/store'
import {
    initViewer,
    setScene,
    loadTilesets,
} from "@/cesiumTools/sceneManager";

//使用cesium默认配置 初始化viewer
Cesium.Ion.defaultAccessToken =
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzYTgzYWYzNS00Zjk0LTQ1MTYtYmUwMi0yZWQwNDdiZDE5ODAiLCJpZCI6MzA4NjQ3LCJpYXQiOjE3NDg5MjA2Mzl9.W14LDt4yTKkBBxFta2-hDGUlaIj4kWPAj0bUdkFJnI8";

const dataStore=useMapData()
onMounted(async () => {
    const viewer = initViewer("cesium-viewer");
    setScene(viewer);
    // 可以使用pinia来管理viewer地图对象，只需要将其标记为非响应式即可
    dataStore.setViewer(markRaw(viewer))
    const modelUrls = [{
      url:"http://localhost:666/model/model/tileset.json",
      options:{}
    }]
    // 加载多个3dtiles
    await loadTilesets(viewer,modelUrls,(tilesets)=>{
      dataStore.setTileset(tilesets[0])
      viewer.zoomTo(tilesets[0])
    })
});
</script>
<style>
#cesium-viewer {
    width: 100%;
    height: 100%;
    pointer-events: all;
}
</style>